<template>
  <div class='camera-page'>
    <camera flash="off" class='camera' :device-position='toggleDev'>
      <cover-view class="play">
        <cover-image class='play_icon' src="/static/img/toggle_camara.png" @click='toggleCamara'/>
      </cover-view>
      <cover-view class='photo-mask' v-if='src'>
        <cover-view class='photo-wrap'>
          <cover-image class='photo' :src="src" />
          <!-- <cover-view class='btn_ok' @click='handleOk'>
            确定1
          </cover-view>
          <cover-view class='btn_cancel' @click='handleCancel'>
            取消
          </cover-view> -->
        </cover-view>
      </cover-view>
    </camera>
    <!-- <button type="primary" @click="takePhoto">拍照</button>
    <image mode="widthFix" :src="src" /> -->
    <div class='controls_wrap'>
      <img alt='' src="/static/img/camera_icon.png" class='play_icon' @click='takePhoto'>
      <span class='controls_item cancel' @click='handleCancel'>
        重拍
      </span>
      <span class='controls_item photo_ok' @click='handleOk'>
        上传
      </span>
    </div>
  </div>
</template>

<script>
import {mapMutations} from 'vuex'
import {SAVE_PHOTO_URL, SAVE_IMG_INFO} from '../../store/mutation-types'
export default {
  name: 'Camera',
  data () {
    return {
      src: null,
      toggleDev: 'front' // 切换摄像头前置后置
    }
  },
  computed: {
  },
  methods: {
    ...mapMutations([
      SAVE_PHOTO_URL, SAVE_IMG_INFO
    ]),
    toggleCamara () {
      if (this.toggleDev === 'front') {
        this.toggleDev = 'back'
      } else {
        this.toggleDev = 'front'
      }
    },
    handleCancel () {
      this.src = null
    },
    handleOk () {
      // 拍摄完成，跳转到编辑页
      if (!this.src) return
      this[SAVE_PHOTO_URL](this.src)
      const _this = this
      wx.showLoading({
        title: '正在上传',
        mask: true
      })
      wx.uploadFile({
        url: 'https://c2b.cococall.com/server/wapp/file/upload',
        filePath: _this.src,
        name: 'file',
        success (res) {
          _this.src = null
          _this[SAVE_IMG_INFO](JSON.parse(res.data).data[0])
          wx.redirectTo({
            url: '/pages/edit/edit'
          })
        },
        fail (err) {
          console.dir(err)
          wx.showToast({
            title: '上传失败',
            mask: true
          })
        },
        complete () {
          wx.hideLoading()
          // TODO:
          wx.redirectTo({
            url: '/pages/edit/edit'
          })
        }
      })
    },
    takePhoto () {
      const _this = this
      const ctx = wx.createCameraContext()
      ctx.takePhoto({
        quality: 'high',
        success: (res) => {
          _this.src = res.tempImagePath
        }
      })
    }
  }
}
</script>

<style scoped lang='less'>
  .camera-page{
    height: 100vh;
    .camera{
      width:100%;
      height:940rpx;
      position: relative;
      .play{
        position: absolute;
        top:60rpx;
        right:60rpx;
        .play_icon{
          width:60rpx;
          height:46rpx;
        }
      }
      .photo-mask{
        position: absolute;
        left:0;
        top:0;
        right:0;
        bottom:0;
        background:rgba(50, 50, 50, 0.8);
        // background: hsla(0,0%,100%,.5);
        // -webkit-filter: blur(30px);
        // filter: blur(30px);
        // border:1px solid red;
        .photo-wrap{
          position: absolute;
          top:50rpx;
          left:50rpx;
          bottom:50rpx;
          right:50rpx;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .photo{
          width:100%;
        }
        .btn_ok{
          position: absolute;
          bottom:300rpx;
          left:40%;
          background:#eee;
        }
        .btn_cancel{
          position: absolute;
          bottom:300rpx;
          left:50%;
          background:#eee;
        }
      }
    }
    .controls_wrap{
      position: fixed;
      bottom:0;
      left:0;
      right:0;
      top:940rpx;
      background:#000;
      .play_icon{
        width:100rpx;
        height:100rpx;
        position: absolute;
        left:50%;
        top:50%;
        transform: translate(-50%,-50%);
      }
      .controls_item{
        position: absolute;
        top:50%;
        transform: translate(0,-50%);
        color:#fff;
      }
      .cancel{
        left:132rpx;
      }
      .photo_ok{
        right:132rpx;
      }
    }
  }
</style>
